<template>
	<view class="content">
		<view class="example-body">
			<radio-group @change="listenerRadioGroup" style="transform:scale(0.8)" >
				<!--label通常与radio和checkbox结合使用-->
				<label style="display: flex;padding-top: 10rpx">
					
					<radio value="男"  checked="true" />男
					<radio value="女" />女
				</label>
			</radio-group>
			<uni-datetime-picker class="times" type="datetime" v-model="datetimesingle" @change="changeLog" />

			<view class="query" @click="query">
				<span class="">查询</span>
			</view>

		</view>
		<view class="" v-if="list">


			<view class="infos">
				<view class="title">
					<text class="shu"></text>
					<span class="ti">四柱信息</span>
				</view>
				<view class="sizhu">
					<view class="info">
						<view class="name">
							{{list.data.sz[0]}}
						</view>
						<view class="date">
							年柱
						</view>
					</view>
					<view class="info">
						<view class="name">
							{{list.data.sz[1]}}
						</view>
						<view class="date">
							月柱
						</view>
					</view>
					<view class="info">
						<view class="name">
							{{list.data.sz[2]}}
						</view>
						<view class="date">
							日柱
						</view>
					</view>
					<view class="info">
						<view class="name">
							{{list.data.sz[3]}}
						</view>
						<view class="date">
							时柱
						</view>
					</view>
				</view>

			</view>
			<view class="infos">
				<view class="title">
					<text class="shu"></text>
					<span class="ti">五行信息</span>
				</view>
				<view class="wuxing_bg">

					<view class="bg" style="position: relative;">
						<span class="jin">{{wuxingitems.jin}}</span>
						<span class="mu">{{wuxingitems.mu}}</span>
						<span class="shui">{{wuxingitems.shui}}</span>
						<span class="huo">{{wuxingitems.huo}}</span>
						<span class="tu">{{wuxingitems.tu}}</span>

					</view>
				</view>
			</view>
			<view class="infos">
				<view class="title">
					<text class="shu"></text>
					<span class="ti">更多信息</span>
				</view>

				<view class="list_item">
					<view class="l">
						<text class="l_c">性别</text>
						<text>{{list.data.xb}}</text>
					</view>
					<view class="l">
						<text class="l_c">年份生肖</text>
						<text>{{list.data.sx}}</text>
					</view>



				</view>
				<view class="list_item_taishen">
					<view class="l">
						<text class="l_c">生辰(农历)</text>
						<text>{{list.data.nl[0]}}年 {{list.data.nl[1]}}月{{list.data.nl[2]}}日</text>

					</view>


				</view>
				<view class="list_item_taishen">
					<view class="l">
						<text class="l_c">生辰(公历)</text>
						<text>{{list.data.gl[0]}}年 {{list.data.gl[1]}}月{{list.data.gl[2]}}日{{list.data.gl[3]}}时</text>

					</view>


				</view>
				<view class="list_item_taishen">
					<view class="l">
						<text class="l_c">五行</text>
						<text>{{wuxingnum.toString()}}</text>

					</view>


				</view>
				<view class="list_item" style="border-top: 0;">
					<view class="l">
						<text class="l_c">月份星座</text>
						<text>{{list.data.xz}}</text>
					</view>

					<view class="l">
						<text class="l_c">起运年（公历）</text>
						<text>{{list.data.qyy}}</text>
					</view>


				</view>
				<view class="list_item_taishen">
					<view class="l">
						<text class="l_c">起运时间</text>
						<text>{{list.data.qyy_desc}}</text>

					</view>


				</view>
				<view class="list_item_taishen">
					<view class="l">
						<text class="l_c">交接运（公历）</text>
						<text>{{list.data.qyy_desc2}}</text>

					</view>


				</view>
				<view class="list_item" style="border-top: 0;padding-bottom: 20px;">
					<view class="l">
						<text class="l_c">八字天干对应数字</text>
						<text>{{list.data.tg}}</text>
					</view>
					<view class="l">
						<text class="l_c">八字地支对应数字</text>
						<text>{{list.data.dz}}</text>
					</view>


				</view>

			</view>
		</view>
          <view class="yl">
          	<text>仅供娱乐！请勿当真</text>
          </view>
	</view>
</template>

<script>
	import {
		throttle
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				datetimesingle: '',
				arraySelect: ['男', '女'],
				sex: 0,
				wuxingnum: [],
				date_parts:[],
				time_parts:[],
				list: null,
				wuxingitems: {
					jin: 0,
					mu: 0,
					shui: 0,
					huo: 0,
					tu: 0
				}
			}
		},
		onShareAppMessage(res) {
				wx.showShareMenu({
				     withShareTicket: true,
				     menus: ['shareAppMessage', 'shareTimeline']
				    })
				return{
						title:"来测测你的生辰八字吧",
						imageUrl:"https://www.leedong.top/img/suangua1.jpg",
				}
				
				},
				//2.分享到朋友圈
		onShareTimeline(){
		
			return {
				title: '来测测你的生辰八字吧',
				 imageUrl:"https://www.leedong.top/img/suangua1.jpg"
				
			}
		},
		methods: {
			changeLog(v) {
				console.log(v)
				this.dategsh(v)
			},
			caleWuxing(elements) {
				let elementCounts = elements.reduce((acc, element) => {
					acc[element] = (acc[element] || 0) + 1;
					return acc;
				}, {});
			},
			listenerRadioGroup(e) {
				this.sex = e.detail.value == '男' ? '0' : '1';
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.paipan({
					y: this.date_parts[0],
					m: this.date_parts[1],
					d: this.date_parts[2],
					h: this.time_parts[0],
					i: this.time_parts[1],
					s: this.time_parts[2],
					x: this.sex
				}).then(res => {
					if(res.code==200){
						this.wuxingnum = [...res.data.ewxtg, ...res.data.ewxdz]
						let elementCounts = this.wuxingnum.reduce((acc, element) => {
							acc[element] = (acc[element] || 0) + 1;
							return acc;
						}, {});
						this.wuxingitems.mu = elementCounts["木"]
						this.wuxingitems.jin = elementCounts["金"]
						this.wuxingitems.shui = elementCounts["水"]
						this.wuxingitems.huo = elementCounts["火"]
						this.wuxingitems.tu = elementCounts["土"]
						console.log(this.wuxingitems)
						this.list = res;
					}else{
						
					uni.showToast({
							title:res.msg,
							icon:'noe'
						})
					}
					uni.hideLoading()
					
				})
			},
			query() {
				if(this.time_parts.length==0){
					uni.showToast({
						title:'请选择出生日期',
						icon:"none"
					})
					return
				}
				throttle(this.getData(), 2000)
			},
			dategsh(v) {
				let date_time_parts = v.split(" ")
				this.date_parts = date_time_parts[0].split("-")
				this.time_parts = date_time_parts[1].split(":")
			}
		}
	}
</script>

<style lang="scss">
	text{
		user-select: all;
	}
	@mixin two {
		display: grid;
		grid-template-columns: 50% 50%;
		align-items: center;
		border: 1px solid #f4dab4;
	}

	@mixin three {
		display: grid;
		grid-template-columns: 33% 33% 33%;
		align-items: center;
		border-bottom: 1px solid #f4dab4;

	}

	@mixin one {
		display: grid;
		grid-template-columns: 100%;
		align-items: center;

	}

	@mixin items {
		.l {
			display: grid;
			grid-template-columns: 80px auto;
			align-items: center;
			min-height: 50px;
			border-right: 1px solid #f4dab4;
			text-align: center;

			.l_c {
				color: #b9a182;
				padding-left: 10rpx;
			}
		}

		.nayin {

			.g {
				color: #55c21b;
			}

		}
	}


	.content {
		width: 100%;

		.infos {
			margin-top: 30rpx;

			.title {
				display: flex;
				padding: 20rpx;

				.shu {

					width: 5px;
					height: 20px;
					background-color: #e6a84b;
					border-radius: $uni-border-radius-base;
				}

				.ti {
					padding-left: 15rpx;
				}
			}

			.sizhu {
				display: flex;
				justify-content: space-around;

				.info {
					width: 20%;
					text-align: center;

					.name {
						width: 100%;
						height: 70px;
						text-align: center;
						line-height: 70px;
						background-color: #fcf6ed;
						border-radius: 20rpx;
						border: 1px solid #e9b261;
						box-shadow: 0px 1px 4px #cbd2aa;
						font-size: 40rpx;
						font-weight: 800;
					}

					.date {
						color: #000;
					}
				}
			}

			.wuxing_bg {
				width: 100%;
				display: flex;
				justify-content: center;

				.bg {
					width: 300px;
					height: 278px;

					background-image: url(https://www.leedong.top/img/wuxing.png);

					.jin {
						position: absolute;
						bottom: 8px;
						right: 87px;
						font-size: 37rpx;
						color: #fff;
					}

					.mu {
						position: absolute;
						top: 48%;
						left: 48px;
						font-size: 37rpx;
						color: #fff;
					}

					.shui {
						position: absolute;
						bottom: 8px;
						left: 83px;
						font-size: 37rpx;
						color: #fff;
					}

					.huo {
						position: absolute;
						top: 59px;
						left: 48%;
						font-size: 37rpx;
						color: #fff;
					}

					.tu {
						position: absolute;
						top: 48%;
						right: 48px;
						font-size: 37rpx;
						color: #fff;
					}
				}
			}

			.list_item {
				@include two;


				@include items;
			}

			.list_item_taishen {
				@include one;
				border-bottom: 1px solid #f4dab4;
				@include items;


			}
		}



		.wxllt {
			width: 100%;
			text-align: center;
			margin-top: 20px;
			font-size: 30rpx;
		}



		.uni-date-x--border {
			border-right: 0;
			border-radius: 10rpx 0 0 10rpx;
		}

		.query {
			color: cornflowerblue;
			height: 35px;
			border: 1px solid #e5e5e5;
			border-left: 0;
			width: 50px;
			line-height: 35px;
			border-radius: 0px 10rpx 10rpx 0;
			color: 28rpx;
			background-color: #e5e5e5;
			text-align: center;
		}

		.example-body {
			width: 95%;
			margin: auto;
			display: flex;
			align-items: center;
			height: 80px;
			padding: 10px;

			box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
		}
	}
</style>